import React, { PureComponent } from 'react'
import { 
  RecommendWrapper, 
  RecommendItem 
} from '../style'
import { connect } from 'react-redux'

class Recommend extends PureComponent{
  constructor(props) {
    super(props)
    this.props.onRef(this);
  }
  render() {
    const { imgList } = this.props;
    return (
      <RecommendWrapper>
        {
          imgList.map((item,index) => {
            return (
              <RecommendItem key={index}
                onClick={this.handleClick}
              >
                <img className="recommend-img" src={item} alt='' />
              </RecommendItem>
            )
          })
        }

      </RecommendWrapper>
    )
  }
  handleClick(){
    alert(123465)
  }
}

const mapStateToProps = (state) => {
  return {
    imgList:state.getIn(['home','imgList'])
  }
}

export default connect(mapStateToProps)(Recommend)